import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import DockPanel, { TestView } from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const [tags, setTags] = useState(['test1', 'test2', 'test3', 'test4']);

  const [mode, setMode] = useState('normal');

  const [kk, setKK] = useState('small');

  const updateTags = (tag) => {
    if (tags.includes(tag)) {
      const find = tags.find((t) => {
        return t === tag;
      });
      if (find) {
        tags.splice(tags.indexOf(find), 1);
        setTags([...tags]);
      }
    } else {
      setTags([...tags, tag]);
    }
  };

  return (
    <div className={classnames(styles.root, className)}>
      <div className={styles.float}>
        <DockPanel
          mode={mode}
          onChange={(e) => {
            const { event, close, fullScreen } = e;
            window.console.log(e);
            if (event === 'close') {
              window.console.log(close);
              setTags(close.value);
            }
            if (event === 'fullScreen') {
              window.console.log(fullScreen.value);
            }
          }}
        >
          {tags.map((t) => {
            return (
              <DockPanel.Item tag={t} title={t.replace('test', 'title')}>
                <TestView
                  className={styles.view}
                  kkStyle={kk === 'small' ? { width: 100, height: 100 } : { width: 600, height: 600 }}
                >
                  {t.replace('test', '')}
                </TestView>
              </DockPanel.Item>
            );
          })}
        </DockPanel>
      </div>
      <div className={styles.floatLeg}>
        <button
          type="button"
          style={{ color: tags.includes('test1') ? 'red' : 'black' }}
          onClick={() => {
            window.console.log('click1');
            updateTags('test1');
          }}
        >
          test1
        </button>
        <button
          type="button"
          style={{ color: tags.includes('test2') ? 'red' : 'black' }}
          onClick={() => {
            updateTags('test2');
          }}
        >
          test2
        </button>
        <button
          type="button"
          style={{ color: tags.includes('test3') ? 'red' : 'black' }}
          onClick={() => {
            updateTags('test3');
          }}
        >
          test3
        </button>
        <button
          type="button"
          style={{ color: tags.includes('test4') ? 'red' : 'black' }}
          onClick={() => {
            updateTags('test4');
          }}
        >
          test4
        </button>
        <br />
        <button
          type="button"
          style={{ color: mode === 'normal' ? 'red' : 'black' }}
          onClick={() => {
            setMode('normal');
          }}
        >
          normal
        </button>
        <button
          type="button"
          style={{ color: mode === 'nplus1' ? 'red' : 'black' }}
          onClick={() => {
            setMode('nplus1');
          }}
        >
          nplus1
        </button>
        <br />
        <button
          type="button"
          style={{ color: kk === 'small' ? 'red' : 'black' }}
          onClick={() => {
            setKK('small');
          }}
        >
          small
        </button>
        <button
          type="button"
          style={{ color: kk === 'big' ? 'red' : 'black' }}
          onClick={() => {
            setKK('big');
          }}
        >
          big
        </button>
      </div>
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
